import React, { useState, useEffect } from'react';
import {
    StyleSheet,
    Text,
    TextInput,
    View,
    TouchableOpacity,
    KeyboardAvoidingView,
    Platform,
    ImageBackground
} from'react-native';

const LoginScreen = () => {
    const [phoneNumber, setPhoneNumber] = useState('');
    const [password, setPassword] = useState('');
    const [verificationCode, setVerificationCode] = useState('');
    const [phoneError, setPhoneError] = useState('');
    const [passwordError, setPasswordError] = useState('');
    const [codeError, setCodeError] = useState('');
    const [agreementError, setAgreementError] = useState('');
    const [countdown, setCountdown] = useState(0);

    const handleLogin = () => {
        setPhoneError('');
        setPasswordError('');
        setCodeError('');
        setAgreementError('');

        let hasError = false;
        if (!phoneNumber) {
            setPhoneError('手机号为必填项');
            hasError = true;
        }
        if (!password) {
            setPasswordError('密码为必填项');
            hasError = true;
        }
        if (!verificationCode) {
            setCodeError('验证码为必填项');
            hasError = true;
        }
        if (!hasError) {
            console.log('Phone Number:', phoneNumber, 'Password:', password, 'Verification Code:', verificationCode);
        }
    };

    const handleGetCode = () => {
        if (countdown === 0) {
            setCountdown(60);
            console.log('获取验证码');
        }
    };

    useEffect(() => {
        let timer: string | number | NodeJS.Timeout | undefined;
        if (countdown > 0) {
            timer = setInterval(() => {
                setCountdown(prevCountdown => prevCountdown - 1);
            }, 1000);
        }
        return () => clearInterval(timer);
    }, [countdown]);

    return (
        <KeyboardAvoidingView
            style={styles.container}
            behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
        >
            <ImageBackground
                source={require('./image/vx.jpg')} 
                style={styles.backgroundImage}
                resizeMode="cover"
            >
                <View style={styles.overlay}>
                    <View style={styles.header}>
                        <Text style={styles.headerText}>
                            欢迎
                            <Text style={[styles.headerText, { color:'red' }]}>登录</Text>
                            鸿蒙项目
                        </Text>
                    </View>
                    <View style={styles.inputContainer}>
                        <View style={styles.inputWrapper}>
                            <TextInput
                                style={[styles.input, { flex: 1 }]}
                                placeholder="请输入手机号"
                                onChangeText={(text) => setPhoneNumber(text)}
                                value={phoneNumber}
                                keyboardType="phone-pad"
                            />
                        </View>
                        {phoneError ? <Text style={styles.errorText}>{phoneError}</Text> : null}
                        <View style={styles.inputWrapper}>
                            <TextInput
                                style={[styles.input, { flex: 1 }]}
                                placeholder="请输入密码"
                                onChangeText={(text) => setPassword(text)}
                                value={password}
                                secureTextEntry
                            />
                        </View>
                        {passwordError ? <Text style={styles.errorText}>{passwordError}</Text> : null}
                        <View style={styles.codeInputContainer}>
                            <View style={styles.inputWrapper}>
                                <TextInput
                                    style={[styles.input, { flex: 2 }]}
                                    placeholder="验证码"
                                    onChangeText={(text) => setVerificationCode(text)}
                                    value={verificationCode}
                                />
                                <TouchableOpacity
                                    style={styles.getCodeText}
                                    onPress={handleGetCode}
                                    disabled={countdown > 0}
                                >
                                    <Text style={styles.getCodeButtonText}>
                                        {countdown > 0 ? `${countdown}s 后重试` : '获取验证码'}
                                    </Text>
                                </TouchableOpacity>
                            </View>
                            {codeError ? <Text style={styles.errorText}>{codeError}</Text> : null}
                        </View>
                    </View>
                    {agreementError ? <Text style={styles.errorText}>{agreementError}</Text> : null}
                    <TouchableOpacity style={styles.loginButton} onPress={handleLogin}>
                        <Text style={styles.loginButtonText}>登录</Text>
                    </TouchableOpacity>
                </View>
            </ImageBackground>
        </KeyboardAvoidingView>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1
    },
    backgroundImage: {
        flex: 1
    },
    overlay: {
        flex: 1,
        backgroundColor: 'rgba(0, 0, 0, 0.5)', 
        justifyContent: 'center',
        padding: 20
    },
    header: {
        alignItems: 'flex-start', 
        marginBottom: 30
    },
    headerText: {
        fontSize: 30,
        fontWeight: 'bold',
        color: '#fff',
        textShadowColor: 'rgba(0, 0, 0, 0.75)',
        textShadowOffset: { width: -1, height: 1 },
        textShadowRadius: 10
    },
    inputContainer: {
        marginBottom: 20
    },
    inputWrapper: {
        borderBottomWidth: 1,
        borderBottomColor: '#ccc',
        marginBottom: 20,
        flexDirection: 'row',
        alignItems: 'center'
    },
    input: {
        height: 50,
        padding: 10,
        color: '#fff',
        placeholderTextColor: 'red',
        flexGrow: 1
    },
    codeInputContainer: {
        marginBottom: 15
    },
    getCodeText: {
        padding: 10
    },
    getCodeButtonText: {
        color: '#fff',
        fontSize: 16
    },
    readAgreement: {
        flexDirection: 'row',
        alignItems: 'center',
        marginBottom: 15
    },
    agreementText: {
        fontSize: 14,
        color: '#fff',
        textShadowColor: 'rgba(0, 0, 0, 0.75)',
        textShadowOffset: { width: -1, height: 1 },
        textShadowRadius: 10
    },
    loginButton: {
        backgroundColor: '#fff',
        padding: 15,
        borderRadius: 5,
        alignItems: 'center'
    },
    loginButtonText: {
        color:'red',
        fontSize: 18,
        fontWeight: 'bold'
    },
    checkboxImage: {
        width: 20,
        height: 20,
        marginRight: 10
    },
    errorText: {
        color:'red',
        fontSize: 12,
        marginBottom: 10
    }
});

export default LoginScreen;    